<template>
  <div class="page-container">
    <div class="descriptions">
      <a-space direction="vertical" style="display: block">
        <a-row>
          <a-col :span="24">
            <div class="descriptions-title">模板信息</div>
          </a-col>
          <a-col :span="12">
            <div class="descriptions-item">
              <div class="label">模板名称</div>
              <div>{{ templateInfo.typeName }}</div>
            </div>
          </a-col>
          <a-col :span="12">
            <div class="descriptions-item">
              <div class="label">模板状态</div>
              <div>{{ templateInfo.statusName }}</div>
            </div>
          </a-col>
          <a-col :span="24">
            <div class="descriptions-item">
              <div class="label">模板说明</div>
              <div>
                <div v-for="item in templateInfo.memo" :key="item">{{ item }}</div>
              </div>
            </div>
          </a-col>
        </a-row>
      </a-space>
      <a-divider />
      <a-space direction="vertical" style="display: block">
        <a-row>
          <a-col :span="24">
            <div class="descriptions-title">推送规则</div>
          </a-col>
          <a-col :span="8">
            <div class="descriptions-item">
              <div class="label">通知方式</div>
              <div>{{ templateInfo.sendTypeName }}</div>
            </div>
          </a-col>
          <a-col :span="8">
            <div class="descriptions-item" v-if="templateInfo?.sendTypeList?.includes(1) && templateInfo.needAppPush === 1">
              <div class="label">是否在手机端推送消息</div>
              <div class="value">
                <div class="view-content">
                  <div>{{ templateInfo.needAppPushName }}</div>
                  <a-link @click="() => onClickView('app')">【查看样式】</a-link>
                </div>
              </div>
            </div>
          </a-col>
          <a-col :span="8">
            <div class="descriptions-item" v-if="templateInfo?.sendTypeList?.includes(1) && templateInfo.needPcPush === 1">
              <div class="label">是否在电脑端推送消息</div>
              <div>{{ templateInfo.needPcPushName }}</div>
              <a-link @click="() => onClickView('pc')">【查看样式】</a-link>
            </div>
          </a-col>
          <a-col :span="24">
            <div class="descriptions-item" v-if="templateInfo?.sendTypeList?.includes(2)">
              <div class="label">短信内容</div>
              <div>{{ templateInfo.smsTemplate }}</div>
            </div>
          </a-col>
          <a-col :span="24">
            <div class="descriptions-item">
              <div class="label">推送时间</div>
              <div>{{ templateInfo.sendTimeDesc }}</div>
            </div>
          </a-col>
          <a-col :span="24" v-if="templateInfo.type !== 31">
            <div class="descriptions-item">
              <div class="label">推送内容</div>
              <div>{{ templateInfo.pushContent }}</div>
            </div>
          </a-col>
          <a-col :span="24">
            <div class="descriptions-item">
              <div class="label">推送的人员</div>
              <div class="value">
                <template v-if="sendTargetSource">
                  <div class="sendTarget-title">{{ getSendTargetName(sendTargetSource) }}</div>
                  <div class="sendTarget-content">{{ templateInfo.sendTargetList }}</div>
                </template>
                <template v-else>
                  {{ templateInfo.sendTargetTypeName }}
                </template>
              </div>
            </div>
          </a-col>
        </a-row>
      </a-space>
    </div>

    <view-dialog v-model="viewVisible" :type="viewType" />
  </div>
</template>

<script setup lang="ts">
  import viewDialog from '../dialog/view-dialog.vue'

  import { onMounted, ref } from 'vue'
  import { useRoute } from 'vue-router'
  import { getBusinessMessageDetail } from '@/api/business/message'

  const route = useRoute()
  const templateInfo = ref<any>([])

  const viewVisible = ref(false)
  const viewType = ref('pc')
  const onClickView = (type: string) => {
    viewType.value = type
    viewVisible.value = true
  }

  const getSendTargetName = (type: string) => {
    switch (type) {
      case '1':
        return '按角色发送'
      case '2':
        return '按员工岗位发送'
      case '3':
        return '选择员工发送'
    }
  }

  const sendTargetSource = ref()
  onMounted(() => {
    if (route.params.id) {
      getBusinessMessageDetail({ id: route.params.id }).then((res: any) => {
        console.log(res, 12)
        const result = res.result
        templateInfo.value = result
        templateInfo.value.memo = res.result.memo.split('\r\n')
        templateInfo.value.sendTargetList = result.sendTargetList.map((item: any) => item.targetName).join(' | ')
        const sendTarget = result.sendTargetTypeSelectList.find((item: any) => item.value === result.sendTargetType + '')
        sendTargetSource.value = sendTarget.dataSource
      })
    }
  })
</script>

<style lang="less" scoped>
  .descriptions {
    font-size: 14px;
    font-weight: 400;

    .descriptions-title {
      font-size: 16px;
      font-weight: 500;
      margin-bottom: 16px;
    }
    .descriptions-item {
      width: 100%;
      display: flex;
      margin-bottom: 8px;
      color: #1d2129;

      .label {
        color: #4e5969;
        margin-right: 8px;
        text-align: right;
        min-width: 90px;
        &:after {
          content: '：';
        }
      }

      .value {
        flex: 1;
        .sendTarget-content {
          padding: 12px 12px;
          background: rgba(247, 248, 250, 0.5);
        }
        .view-content {
          display: flex;
          align-items: center;
        }
      }
    }
  }
</style>
